<script setup lang="ts">
import { ref } from 'vue'
import {
  getPhoneNumberApi,
  getOpenidAndNicknameApi,
  loginByWechatApi,
  registerByWechatApi,
  loginApi,
} from '@/services/login'
import { useMemberStore, useDeviceStore } from '@/stores'
const phonenumber = ref('')
const openid = ref('')
const memberStore = useMemberStore()
const deviceStore = useDeviceStore()
/**
 * 手机号授权
 */
const getphonenumber = async (e: any) => {
  //console.log(e.detail.code+'获取用户手机')
  console.log(e.detail)
  const { detail } = e
  if (detail.errMsg === 'getPhoneNumber:ok') {
    const code = detail.code // 动态令牌
    console.log(code)
    const res = await getPhoneNumberApi(code)
    phonenumber.value = res.data
    if (res.msg === '对象正常') {
      getOpenid()
    }
  } else {
    console.log('用户拒绝授权')
  }
}

/**
 * 获取openid和昵称
 */
const getOpenid = async () => {
  const { code } = await uni.login()
  //console.log(code)
  const res = await getOpenidAndNicknameApi(code)
  //console.log(data)
  if (res.msg === '对象正常') {
    openid.value = res.data.openID
    //先登录，根据登录返回的msg看是否需要注册
    const loginres = await loginByWechatApi(openid.value)
    if (loginres.msg === '对象正常') {
      //已注册，直接登录
      memberStore.setProfile(loginres.data)
      deviceStore.getDeviceList()
      uni.switchTab({
        url: '/pages/index/index',
      })
    }
    //后台接口已更新
    if (loginres.msg === '该微信未绑定用户') {
      //未注册，直接注册
      const registerres = await registerByWechatApi(phonenumber.value, openid.value)
      //后台接口已更新
      if (registerres.msg === '该手机号已注册') {
        uni.showToast({
          title: '该手机号已注册,请前往app绑定微信',
          icon: 'none',
          duration: 2000,
        })
      }
      if (registerres.msg === '对象正常') {
        //注册成功，直接登录
        memberStore.setProfile(registerres.data)
        deviceStore.getDeviceList()
        uni.switchTab({
          url: '/pages/index/index',
        })
      }
    }
  } else {
    uni.showToast({
      title: '获取微信信息失败',
      icon: 'none',
      duration: 2000,
    })
  }
}
const loginbypassword = async () => {
  const res = await loginApi({
    phone: '15396935567',
    password: 'cyxhcg3s34',
  })
  memberStore.setProfile(res.data)
  deviceStore.getDeviceList()
  uni.switchTab({
    url: '/pages/index/index',
  })
}
</script>

<template>
  <view class="viewport">
    <img src="@/static/my_icon.png" alt="" class="logo" />
    <view class="hint"> 为体验更多内容和确保您的账户安全，请先创建用户 </view>
    <view class="apply"> 申请获取以下权限 </view>
    <view class="info"> 获得你的公开信息（手机号、昵称、头像） </view>
    <view class="custom-style">
      <u-button type="primary" shape="circle" :plain="true" @click="loginbypassword"
        >登录测试</u-button
      >
    </view>
    <view class="custom-style">
      <u-button
        type="primary"
        open-type="getPhoneNumber"
        shape="circle"
        :plain="true"
        @getphonenumber="getphonenumber"
        >手机号登录</u-button
      >
    </view>
    <view class="protocol"> 登陆/注册表示您同意《用户协议》和《隐私政策》 </view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  .viewport {
    height: 100%;
    position: relative;
    font-family: PingFangSC-regular;
    font-size: 26.923rpx;
    .logo {
      margin: 0 50%;
      transform: translateX(-50%);
      padding-top: 257.692rpx;
      width: 153.846rpx;
      height: 153.846rpx;
    }
    .hint {
      margin: 121.154rpx auto 0;
      width: 565.385rpx;
      height: 86.538rpx;
      line-height: 38.462rpx;
      color: rgba(16, 16, 16, 1);
      font-size: 26.923rpx;
    }
    .apply {
      margin: 132.692rpx auto 0;
      width: 565.385rpx;
      height: 38.462rpx;
      line-height: 38.462rpx;
      color: rgba(16, 16, 16, 1);
    }
    .info {
      margin: 28.846rpx auto 57.692rpx;
      width: 565.385rpx;
      height: 38.462rpx;
      line-height: 38.462rpx;
      color: rgba(190, 190, 190, 1);
    }
    .custom-style {
      margin: 0 auto;
      width: 634.615rpx;
      height: 76.923rpx;
      line-height: 44.231rpx;
      border-radius: 192.308rpx;
      background-color: rgba(243, 249, 255, 1);
      color: rgba(52, 124, 175, 0.5);
      font-size: 30.769rpx;
      text-align: center;
      font-family: Microsoft Yahei;
    }
    .protocol {
      position: absolute;
      left: 73.077rpx;
      bottom: 57.692rpx;
      width: 605.769rpx;
      height: 38.462rpx;
      line-height: 38.462rpx;
      color: rgba(187, 187, 187, 1);
      font-size: 26.923rpx;
      font-family: PingFangSC-regular;
    }
  }
}
</style>
